<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!--先引入vue.js再引入vueruter.js-->
		<link rel="stylesheet" type="text/css" href="css/my.css"/>
		<link rel="stylesheet" type="text/css" href="css/study01.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/select.css"/>
		<link rel="stylesheet" type="text/css" href="css/gjjp.css"/>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/quality.js"></script>
	
	</head>
	<body>
		<div id="box">
			<!--router-link 最后变成a标签-->
			<div class="main">
				
				<router-link to="/index">
					<span class="sp1"></span>
					首页</router-link>
				<router-link to="/study">
					<span class="sp2"></span>
					我的学习</router-link>
				<router-link to="/my">
					<span class="sp3"></span>
					账号</router-link>
			</div>
			<router-view></router-view>
		</div>
		
		<template id="index">
			<div id="content">
				<div id="top">
					<div id="search">
						<img src="img/sao.png" width="30px" style="margin-top: 3px;">
						<input type="text" placeholder="中国大学MOOC"/>
					</div>
					<div id="nav">
						<router-link to="/choice" class="c_nav">精选</router-link>
						<router-link to="/select" class="c_nav">精选微课</router-link>
						<router-link to="/quality" class="c_nav">国家精品</router-link>
						<router-link to="/computer" class="c_nav">计算机</router-link>
						
					</div>
					
				</div>
				<router-view></router-view>
				
		</template>
		
		<!-- 精选 -->
		<template id="choice">
			<div id="choice_con">
				<!-- 轮播图 -->
					<div id="lb">
						<div id="lb_wrap">
							<ul id="banner">
								<li v-for="v in picture">
									<img :src="v.img">
								</li>
											
							</ul>
							<span href="#" id="left"><</span>
							<span href="#" id="right">></span>
						</div>
					</div>
					
					
					<!-- 课程 -->
					<div id="course">
						<ul>
							<li v-for="(v,i) in sub">
								<img :src="v.src" >
								<p>{{v.text}}</p>
							</li>
						
						</ul>
					</div>	
					<!-- 一流课程 -->
					<div id="center">
						<img src="img/exam.png">
					</div>
					
					
					<!-- 直播 -->
					<div id="zb">
						<h4>最近直播</h4>
						<div id="zb_con">
							<ul>
								<li v-for="(v,i) in zb_content">
									
									<div id="zb_time"><div id="point"></div><p>{{v.time}}</p></div>
									<img :src="v.img">
									<div id="zb_text">
										<span id="zb_title">{{v.title}}</span>
										<span>{{v.teacher}}</span>
									</div>
									
								</li>
								<div id="more">
									<p>查看更多></p>
								</div>
							</ul>
							
						</div>
					</div>
					
					<!-- 今日公开课 -->
					<div id="today">
						<h4>今日公开课</h4>
						<div id="open">
							<ul id="open_list">
								<li v-for="(v,i) in open">
									<img :src="v.img">
									<div id="open_con">
										<p>{{v.title}}</p>
										<span id="peo">{{v.people}}</span>
									</div>
								</li>
							</ul>
						</div>
					</div>
					
					<!-- 本周课程排行 -->
					<div id="week">
						<h4>本周课程排行</h4>
						
						<ul>
							<p id="hot">热门排行TOP5
								<img src="img/hot.png" width="25px" style="float: right;">
							</p>
							<li v-for="(v,i) in weekcourse">
								<span :class="color[i]">{{i+1}}</span>
								<img :src="v.img">
								<div id="week_con">
									<p>{{v.title}}</p>
									<p>{{v.teacher}}</p>
								</div>
							</li>
						</ul>
						<h5 style=" width:100%: 0 auto;text-align: center;">浏览到尽头啦</h5>
					</div>
					
				</div>
			</div>
			
		</template>
		<!-- 精选微课 -->
		<template id="select">
			<div id="select_con">
				<div class="se_content" id="hobby">
					<h4>兴趣爱好</h4>
					<ul class="ul_list">
						<li v-for="(v,i) in hobby_list">
							
							<div class="h_bottom">
								<span class="flag" v-if="v.flag.show">{{v.flag.text}}</span>
								<h5>{{v.title}}</h5>
								<p class="h_time">{{v.time}}</p>
								<img :src="v.picture" >
								<p class="h_teacher">{{v.teachear}}</p>
								<p class="free">免费</p>
								<p class="h_peo">{{v.people}}</p>
							</div>
						</li>
					</ul>
				</div>
				
				<div id="english">
					<h4>全能英语</h4>
					<ul class="ul_list">
						<li v-for="(v,i) in english_list">
							
							<div class="h_bottom">
								<span class="flag" v-if="v.flag.show">{{v.flag.text}}</span>
								<h5>{{v.title}}</h5>
								<p class="h_time">{{v.time}}</p>
								<img :src="v.picture" >
								<p class="h_teacher">{{v.teachear}}</p>
								<p class="free">免费</p>
								<p class="h_peo">{{v.people}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</template>
		
		<!-- 国家精品 -->
		<template id="quality">
			<div class="q_Course" id="q_Course">
				<div class="q_carousel">
					<section class="carousel">
					<ul class="q_ul">
						<li class="q_li"><img src="img/carousel01.webp" alt=""></li>
						<li class="q_li"><img src="img/carousel02.webp" alt=""></li>
						<li class="q_li"><img src="img/carousel03.webp" alt=""></li>
						<li class="q_li"><img src="img/carousel04.webp" alt=""></li>
					</ul>
					<ol class="points"></ol>
					</section>
				</div>
				<div class="q_tuijian">
					<div class="tj_course">
						<div class="tj_title">最新好课推荐</div>
						<div class="tj_courseli">
							<ul>
								<li v-for="(v,i) in q_Course">
									<img :src="v.img" >
									<div class="tj_info">
									<p class="tj_info_title">{{v.title}}</p>	
									<p class="tj_info_school">{{v.school}}</p>
									<p class="tj_renshu">{{v.txt}}</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="q_all_course">
					<div class="a_course">
						<span class="a_course_t">全部课程</span>
						<span class="xuan">筛选<img src="images/xiala.png" style="width: 13px;"></span>
					</div>
					<div class="a_main">
						<ul>
							<li v-for="(v,i) in q_course2">
								<a href="#">
									<div class="q_course_img">
										<img :src="v.img" style="width: 150px;">
										<span class="flag">国家精品</span>
									</div>
									<div class="b_course_info">
										<p class="b_title">{{v.name}}</p>
										<p class="b_cshool">{{v.school}}</p>
										<p class="b_time">
											<span class="c_time">
												<img :src="v.icon" style="width: 10px;">
												{{v.tip}}
											</span>
											<span class="c_renhsu">{{v.renshu}}</span>
										</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</template>
		
		<!-- 计算机 -->
		<template id="computer">
			<h1>计算机</h1>
		</template>
		
		<!-- 我的学习 -->
		<template id="study">
			<div class="study" id="study1">
				<v-lump01></v-lump01>
				<v-lump02></v-lump02>
				<v-lump03></v-lump03>
			</div>
		</template>
		
		<template id="lump01">
			<div class="lump01">
				<div class="top_nav">
					<ul class="top_nav_left">
						<li><a href="#" style="font-size: 16px;font-weight: bold;">课程</a></li>
						<li><a href="#" style="padding-top: 16px;">慕课堂</a></li>
					</ul>
					<ul class="top_nav_right">
						<li><img src="img/load1.png" ></li>
						<li><img src="img/plan.png" ></li>
					</ul>
				</div>
			</div>
		</template>
		<template id="lump02">
			<div class="lump02">
				<div class="center">
					<div class="center_title">
						<span>我的学习目标</span>
						<span class="goal">调整目标&nbsp;></span>
					</div>
					<div class="band_4">
						<div class="card_1">
							<span class="play">已打卡{{num}}次</span>
							<span class="siliu">四六级</span>
						</div>
						<div :class="classname" @click="change()">
							学习打卡
						</div>
						<div class="discount">
							618四六级特惠
							<span>></span>
						</div>
					</div>
					<div class="icon">
						<a href="#"></a>
					</div>
				</div>
			</div>
		</template>
		<template id="lump03"> 
			<div class="lump03">
				<div class="lump03_course">
					<div class="course_title">
						<span>课程(16)</span>
					</div>
					<div class="course">
						<ul>
							<li v-for="(item,index) in course" v-show="showMore || index < max">
				
								<a href="#">
									<div class="course_img">
										<img :src="item.img" style="width: 150px;">
										<span class="flag">SPOC</span>
									</div>
									<div class="course_info">
										<p>{{item.name}}</p>
										<p class="corse_cshool">{{item.school}}</p>
										<p class="corse_time">
											{{item.time}}
											<div class="bar_wrapper">
												<div class="bar"></div>
											</div>
										</p>
									</div>
								</a>
							</li>
						</ul>
						<div class="more">
							<span v-show="!showMore && course.length > max" @click="showMore = !showMore">查看更多</span>
							 <span v-show="showMore && course.length > max" @click="showMore = !showMore">收起</span>
						</div>
					</div>
				</div>
			</div>
		</template>
								
		
		<!-- 我的 -->
		<template id="my">
			<div id="container">				
				<v-head></v-head>
				<v-foot></v-foot>
			</div>
			
		</template>
		
		<template id="head">
			<div class="main3">
				<div class="head3">
					<ul>
						<li v-for="(v,i) in nav01" @click="link(i)">
							<img :src="v.src" >
						</li>
					</ul>
				</div>
				<div class="user">
					<ul>
						<li>
							<div class="user03">
								<img src="img/cute02.jpg" width="100%" height="100%">
								<!-- <span>{{text02}}</span> -->
								<span>
									<a href="">moonlight</a>
									<span>已学习67个课时</span>
								</span>
								<p>></p>	
							</div>										
						</li>
						<li >
							<ul class="list3">
								<li v-for="(v,i) in nav02">
									<span>{{v.item1}}</span>
									<p >{{v.item2}}</p>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</template>
		<!-- <template id="main">
			<h1>中间</h1>
		</template> -->
		<template id="foot">
			<div class="footbox">
				<div class="foot3">
					<ul>
						<li v-for="(v,i) in nav03" :class="{in:i==4,big:i==5,big2:i==6}" ><!-- :class="{in:i=6}" -->
								<img :src="v.src">
								<span>{{v.text301}}</span>
								<p>{{v.text302}}</p>			
						</li>
					</ul>
				</div>
			</div>
		</template>
		<script src="js/template.js"></script>
		
	</body>
</html>
  